2016-09-21 2 views
1

HTML 형식의 텍스트에 자바 스크립트 코드를 삽입하려고합니다.자바 스크립트 삽입 x 단어 뒤에 jquery 코드

function getActualWords(node) { 
 
    return node.textContent.split(/\s+/).filter(function(word) { 
 
    return word.trim().length; 
 
    }); 
 
} 
 

 
function insertElemAfterNthWord(opts) { 
 
    var defaults = { 
 
    'nth': 5, 
 
    'elemText': 'new element', 
 
    'elemTag': 'div' 
 
    }; 
 

 
    for (var prop in opts) { 
 
    if (opts.hasOwnProperty(prop)) { 
 
     defaults[prop] = opts[prop]; 
 
    } 
 
    } 
 

 
    var d = defaults, 
 
    tag = d.elemTag.replace(/<|>/g, ''), 
 
    elem = document.createElement(tag); 
 

 
    elem.textContent = d.elemText; 
 

 
    d.nth = parseInt(d.nth, 10); 
 

 
    if (d.node) { 
 
    var n = d.node.firstChild, 
 
     words = getActualWords(n), 
 
     wordCount = words.length; 
 

 
    while ((n.nodeType !== 3 || d.nth > wordCount) && n.nextSibling) { 
 

 
     n = n.nextSibling; 
 
     words = getActualWords(n); 
 
     wordCount = words.length; 
 
    } 
 
    if (getActualWords(n).length < d.nth) { 
 
     return; 
 
    } else { 
 
     var w = getActualWords(n).slice(0, d.nth).pop(), 
 
     i = n.textContent.indexOf(w); 
 
     n.splitText(i + w.length); 
 
     n.parentNode.insertBefore(elem, n.nextSibling); 
 
     n.parentNode.insertBefore(document.createTextNode(' '), n.nextSibling); 
 
     n.parentNode.normalize(); 
 

 
     return elem; 
 
    } 
 

 
    } 
 
} 
 

 

 
insertElemAfterNthWord({ 
 
    'nth': 10, 
 
    'elemTag': 'span', 
 
    'elemText': 'this is the newly-added text inside the newly-added element!', 
 
    'node': document.querySelector('div > div') 
 
}).classList.add('newlyAdded');
span { 
 
    color: #f90; 
 
} 
 
div { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.newlyAdded { 
 
    background-color: #ffa; 
 
}
<div class="newsitem_text"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque urna eu pulvinar maximus. Sed elit nunc, vestibulum ut eros vitae, pellentesque rhoncus ipsum. In et metus non diam porttitor maximus iaculis nec lectus. Quisque sodales scelerisque 
 
    auctor. Nam rutrum venenatis eros, eu condimentum erat placerat ut. Pellentesque sed tempus sem, eu viverra ipsum. Vestibulum nec turpis convallis, dapibus massa vitae, posuere mauris. Suspendisse mattis tincidunt lorem. Aliquam erat volutpat. Nullam 
 
    at tincidunt erat, maximus laoreet ipsum.</div>

참조 jsfiddle :

http://jsfiddle.net/davidThomas/y9pw7z0p/1/

여기에서 찾을 :

,745,167,551 그러므로 내가이 jQuery 코드를 사용

는 예를 들어 애드 센스에 대한 자바 스크립트 코드로

'elemText': 'this is the newly-added text inside the newly-added element!' 

을 대체 할 수 있습니까?

+0

당신은 특별한 ID 또는 클래스와 DIV를 만들 수 있고 그것을 채울 JS를 통해. –

답변

0

당신은 span 발리를 사용하고 같은 jQuery로 쉽게 대체 할 수

'elemText':'<span class="adsense">this is the newly-added text inside the newly-added element!</span>' 

그리고 단지 jQuery로 대체 :

$('.adsense').html('adsense code'); 
관련 문제