jquery_jquery를 기반으로 기사에 키워드 링크 추가

처음에 기술 부서에서는 백그라운드에서 기사를 추가하거나 수정할 계획을 세웠을 때 기사의 키워드를 태그로 대체했습니다. 그런데 여기에는 몇 가지 문제가 있습니다
새 키워드가 추가되면 모든 기사를 다시 필터링해야 하나요? 새 키워드를 교체하세요.
키워드 이름이 수정되거나 키워드의 링크 주소가 수정되면 모든 파일을 다시 필터링해야 합니다.
몇 가지 상황을 고려한 결과 백그라운드 솔루션을 사용하는 것이 불가능하다고 느꼈습니다. 그래서 프론트엔드 스크립트 솔루션을 생각하게 되었습니다
아이디어:
키워드 링크의 정보는 여전히 데이터베이스에 저장되어 있고, 데이터베이스에는 키워드 정보를 저장하는 필드가 있습니다.
사용자가 키워드를 추가, 삭제, 업데이트하면

코드 복사 형식으로 백그라운드에 js 파일이 생성됩니다. 코드는 다음과 같습니다.

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

wordlinkdata 변수 두 번째 작업 단계에서 생성된 일부 json 데이터를 저장합니다. "WordLinkAlias"는 키워드 이름을 나타내고 "WordLinkUrl"은 키워드에 대한 링크를 나타냅니다.
첫 페이지에서 생성한 js 파일을 참조하세요. 저는 작업에 jquery 라이브러리를 사용합니다. 우리가 해야 할 일은 기사의 모든 키워드를 바꾸는 것입니다. 이런 식으로 우리는 wordlinkdata 데이터를 사용하여 지속적으로 순환하고 판단해야 합니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function( ) {
AddWordLink();
});
function AddWordLink(){
//특수 단어에 대한 링크 추가
if (wordlinkdata != 정의되지 않음 && 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 == 정의되지 않음 || 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
varspannode = document.createElement('a') ;
spannode.className = 'divArtContentAlink';
spannode.target = 'blank'
var searchnode = middlebit.splitText(str.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone)
if (searchnode.parentNode != 정의되지 않음)
searchnode. parentNode.replaceChild (spannode, middlebit);
}
} else {
$(node).highLight(str, url)
}
})
}
return $(this);
}
})(jQuery)


$.fn.highLight 확장은 하이라이트 확장입니다. 요구 사항 요구 사항, 링크 스타일을 수정해야 하거나 다른 요소를 직접 생성하려면 다음 코드를 수정하면 됩니다.

코드 복사

코드는 다음과 같습니다. varspannode = document.createElement('a') spannode.className = 'divArtContentAlink'

spannode.href = url;

spannode.target = 'blank';


단, 이 방법의 단점은 키워드가 너무 많으면(150개 이상) 페이지 속도가 느려진다는 것입니다
요약: 이 방법의 장점은 이전 기사를 수정할 필요가 없으며 추가, 삭제, 수정이 매우 유연하다는 것입니다.
단점은 키워드가 너무 많으면 속도가 느려진다는 것입니다.

이러한 상황이 발생하면 논의할 수 있습니다. 더 나은 솔루션을 기대합니다