Add keyword links to articles based on jquery_jquery

At first, when the technical department planned to add or modify articles in the background, they replaced the keywords in the articles with tags. But there are some problems with this
If a new keyword is added, will all the articles have to be filtered again? Replace the new keywords.
If the name of the keyword is modified or the link address of the keyword is modified, all files must be filtered again.
After considering some situations, I feel that using the background solution is not feasible. So I thought of the front-end script solution
Idea:
The information of the keyword link is still stored in the database, and there are some fields in the database to save the keyword information.
When the user adds, deletes, or updates keywords, a js file is generated in the background with the following format:

Copy code The code is as follows:

var wordlinkdata='[{"WordLinkAlias":"wordlinkReplace4","WordLinkUrl":"http://www.jb51.net","WordLinkName":"Your uncle 21"},{"WordLinkAlias":"wordlinkReplace7","WordLinkUrl":"http://sc.jb51.net","WordLinkName":"Computer"}]'

wordlinkdata variable Store some json data, which is generated by the second step of operation. "WordLinkAlias" refers to the name of the keyword, and "WordLinkUrl" is the link to the keyword.
Reference the js file we generated on the front page. I use the jquery library in my work. What we need to do is replace all the keywords in the article. In this way, we need to use wordlinkdata data to continuously cycle and judge.

Copy code The code is as follows:

$(document).ready(function() {
AddWordLink();
});
function AddWordLink(){
//Add a link to special words
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) {//Find
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 extension is a highlight extension, I modified it to meet the requirements Requirements, if you need to modify the style of the link, or want to create other elements yourself, you can modify the following code

Copy the code The code is as follows:

var spannode = document.createElement('a');
spannode.className = 'divArtContentAlink';
spannode.href = url;
spannode.target = 'blank';

However, the disadvantage of this method is that when there are too many keywords (more than 150), the page speed will decrease
Summary: The advantages of this method are , there is no need to make any modifications to previous articles, addition, deletion, modification is very flexible
The disadvantage is: once there are too many keywords, the speed will decrease.
If you have encountered this situation, you can discuss it. Looking forward to a better solution