Add keyword links to articles based on jquery

At the beginning, the Technical Department intends to replace the keyword in the article with the <a> tag when adding or modifying the article in the background. But there are some problems.
If a new keyword is added, do all the articles have to be filtered out again. Replace the new keyword.
If you have modified the keyword name or the link address of the keyword, You have to filter all files again.
After some situations, I feel that the background solution is not feasible. So I thought of the foreground script solution.
Ideas:
The keyword link information is stored in the database, and there are some fields in the database to save the keyword information.
When a user adds, deletes, or updates a keyword, a js file is generated in the background in the following format:
Copy codeThe Code is as follows:
Var wordlinkdata = '[{"WordLinkAlias": "wordlinkReplace4", "WordLinkUrl": "http://www.jb51.net", "WordLinkName": "21" },{ "WordLinkAlias ": "wordlinkReplace7", "WordLinkUrl": "http:// SC .jb51.net", "WordLinkName": "computer"}]'

The wordlinkdata variable stores some json data, which is generated in step 2. "WordLinkAlias" refers to the keyword name, and "WordLinkUrl" is the link of the keyword.
REFERENCE The js file we generated on the front-end page. I use the jquery library in my work. We need to replace all the keywords in the article. In this way, we need to use the data of wordlinkdata to continuously judge cyclically.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
AddWordLink ();
});
Function AddWordLink (){
// Add a link to a special word
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) {// search
Var spannode = document. createElement ('A ');
Spannode. className = 'divartcontentalink ';
Spannode. href = url;
Spannode.tar get = '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. the highLight extension is a highlighted extension. I modified it to meet your needs. If you need to modify the link style or want to create other elements, you can modify the following code:
Copy codeThe Code is as follows:
Var spannode = document. createElement ('A ');
Spannode. className = 'divartcontentalink ';
Spannode. href = url;
Spannode.tar get = 'blank ';

However, the disadvantage of this method is that when there are too many keywords (more than 150), the page speed will decrease.
Conclusion: The advantage of this method is that you do not need to modify, add, delete, or modify previous articles flexibly.
The disadvantage is that once there are too many keywords, the speed will decrease.
If you have encountered such a situation, you can discuss it. Looking forward to better solutions