jqueryベースの記事へのキーワードリンクの追加

2915 ワード

技術部門がバックグラウンドで文章を追加または修正しようとしたとき、文章の中のキーワードをタブをクリックします。しかし、いくつかの問題が発生しました。新しいキーワードを追加すると、すべての文章が再びフィルタされるのではないでしょうか。新しいキーワードを置き換える。キーワードの名前を変更したり、キーワードのリンクアドレスを変更したりすると、すべてのファイルが再フィルタされます。いくつかの状況を総合すると、バックグラウンドソリューションを使うのは通用しないような気がします。そこでフロントスクリプトの解決を考えました考え方: キーワードリンクの情報は任意にデータベースに保存され、データベースにはキーワードの情報を保存するフィールドがあります。ユーザーがキーワードを追加、削除、更新すると、バックグラウンドでjsファイルが生成されます。フォーマットは次のとおりです。 var wordlinkdata='[{"WordLinkAlias":"wordlinkReplace 4","WordLinkUrl":"//www.jb 51.net","WordLinkName":"おじいさん21"},{"WordLinkAlias":"wordlinkReplace 7","WordlinkUrl":"http://sc.jb51.net」、「WordLinkName」:「パソコン」}'''' wordlinkdata変数には、2ステップ目の操作で生成されたjsonデータが格納されます。「WordLinkAlias」はキーワードの名前を指し、「WordLinkUrl」はキーワードのリンクです。フロントページで生成したjsファイルを参照します。私の仕事ではjqueryライブラリを使用しています。私たちが仕事をする必要があるのは、文章のすべてのキーワードを置き換えることです。これにより,wordlinkdataのデータで絶えずループ判定を行う必要がある. $(document).ready(function() { AddWordLink(); }); function AddWordLink(){ //特殊語にリンクを付ける if (wordlinkdata != undefined && wordlinkdata != null) { var content = $(".divArtContent"); if (content != null) { var myobject = eval('(' + wordlinkdata + ')'); for (var i = 0; i < myobject.length; i++) { content.highLight(myobject[i].WordLinkName, myobject[i].WordLinkUrl); } } } } (function($) { $.fn.highLight = function(str, url) { if (str == undefined || str == " ") { return this.find("a.divArtContentAlink").each(function() { this.parentNode.firstChild.nodeName; with (this.parentNode) { replaceChild(this.firstChild, this); normalize(); } }).end(); } else { $(this).each(function() { elt = $(this).get(0); elt.normalize(); $.each($.makeArray(elt.childNodes), function(i, node) { if (node.nodeType == 3) { var searchnode = node; var pos = searchnode.data.indexOf(str); if(pos>=0){//検索 var spannode = document.createElement('a'); spannode.className = 'divArtContentAlink'; spannode.href = url; spannode.target = 'blank'; var middlebit = searchnode.splitText(pos); var searchnode = middlebit.splitText(str.length); var middleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); if (searchnode.parentNode != undefined) searchnode.parentNode.replaceChild(spannode, middlebit); } } else { $(node).highLight(str, url); } }) }) } return $(this); } })(jQuery); $.fn.highLight拡張はハイライト拡張で、必要に応じて修正しました。リンクのスタイルを変更したり、他の要素を自分で作成したりする必要がある場合は、以下のコードを変更することができます。 var spannode = document.createElement('a'); spannode.className = 'divArtContentAlink'; spannode.href = url; spannode.target = 'blank'; しかし、この方法の欠点は、キーワードが多すぎると(150を超える)、ページの速度が低下することです。まとめ:この方式の利点は、以前の文章に対していかなる修正をする必要がなくて、追加して、削除して、修正はとても柔軟です欠点は、キーワードが多すぎると速度が下がることです。このような状況に遭遇したことがあれば、検討してみてください。より良い解決策を期待に置き換えます.

ドメイン間でデータが返されるのにコールバック関数が実行されない理由の1つ

[2016-09-11]Ajax+js非同期ログインを実現