jquery_jquery に基づいて記事にキーワード リンクを追加する

当初、技術部門がバックグラウンドで記事の追加や修正を計画していたとき、記事内のキーワードを タグに置き換えていました。しかし、これにはいくつか問題があります
新しいキーワードを追加した場合、すべての記事を再度フィルタリングする必要がありますか?新しいキーワードを置き換えます。
キーワードの名前が変更された場合、またはキーワードのリンク アドレスが変更された場合は、すべてのファイルを再度フィルタリングする必要があります。
いくつかの状況を検討した結果、バックグラウンド ソリューションの使用は現実的ではないと感じました。そこで私はフロントエンド スクリプト ソリューションを考えました。
アイデア:
キーワード リンクの情報は引き続きデータベースに保存され、データベースにはキーワード情報を保存するためのフィールドがいくつかあります。
ユーザーがキーワードを追加、削除、または更新すると、次の形式の js ファイルがバックグラウンドで生成されます:

コードをコピー コードは次のとおりです:

var wordlinkdata='[{"WordLinkAlias":"wordlinkReplace4","WordLinkUrl":"http://www.jb51.net","WordLinkName ":"あなたの叔父さん 21"},{"WordLinkAlias":"wordlinkReplace7","WordLinkUrl":"http://sc.jb51.net","WordLinkName":"Computer"}]'

wordlinkdata 変数 操作の 2 番目のステップで生成された json データを保存します。 「WordLinkAlias」はキーワードの名前を指し、「WordLinkUrl」はキーワードへのリンクを指します。
フロントページで生成した js ファイルを参照してください。私は仕事で jquery ライブラリを使用しています。必要なのは、記事内のすべてのキーワードを置き換えることです。このように、wordlinkdata データを使用して継続的に循環して判断する必要があります。

コードをコピー コードは次のとおりです。

$(document).ready(function( ) {
AddWordLink();
});
function AddWordLink(){
//特別な単語へのリンクを追加します
if (wordlinkdata != unknown && wordlinkdata != null) {
var content = $(".divArtContent");
if (content != null) {
var myobject = eval('(' wordlinkdata ')'); 0; i < myobject.length; i ) {
content.highLight(myobject[i].WordLinkName, myobject[i].WordLinkUrl);
(function($) {
$.fn.highLight = function(str, url) {
if (str == 未定義 || str == " ") {
return this.find ("a .divArtContentAlink").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
正規化() ;
}
}).end();
} else {
$(this).each(function() {
elt = $(this).get( 0);
elt.normalize();
$.each($.makeArray(elt.childNodes), function(i, node) {
if (node.nodeType == 3) {
var searchnode = ノード;
var pos = searchnode.data.indexOf(str);
if (pos >= 0) {//Find
var scannode = document.createElement('a') ;
spannode.className = 'divArtContentAlink';
spannode.target = 'blank';
var middlebit = searchnode.splitText(pos); = middlebit.splitText(str.length);
var middleclone = middlebit.cloneNode(true);
if (searchnode.parentNode != unknown)
searchnode parentNode.replaceChild (spannode, middlebit);
}
} else {
$(node).highLight(str, url);
})
}
return $(this);
}
})(jQuery);


$.fn.highLight 拡張機能は、要件 リンクのスタイルを変更する必要がある場合、または他の要素を自分で作成したい場合は、次のコードを変更できます




コードをコピー


コードは次のとおりです:

var scannode = document.createElement('a');

spannode.className = 'divArtContentAlink'; spannode.href = url; spannode.target = 'blank'; ただし、この方法の欠点は、キーワードが多すぎると (150 を超える)、ページの速度が低下することです。 >まとめ: この方法のメリットは、過去の記事を修正する必要がない、追加、削除、修正が非常に柔軟であることです デメリットは、キーワードが多すぎると速度が低下することです。

このような状況に遭遇した場合は、それについて話し合うことができます。より良い解決策を期待しています