突出的JavaScript每次頁面加載

字在線應顯示爲綠色，而字離線應該會出現黃色。每次我的網頁加載。

我做了什麼：我已經搜索了谷歌整天，甚至在stackoverflow。我能找到的只是;

<head> 
 
<style> 
 
    .found { 
 
    color:red; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
    <input id="s"> 
 
    <div id="a"> 
 
    i am online he is offline. 
 
    </div> 
 
    <script id="jsbin-javascript"> 
 
    var s = document.getElementById('s'); 
 
    var div = document.getElementById('a'); 
 

 
    function changeNode(n, r, f) { 
 
     f=n.childNodes; for(c in f) changeNode(f[c], r); 
 
     if (n.data) { 
 
     f = document.createElement('span'); 
 
     f.innerHTML = n.data.replace(r, '<span class=found>$1</span>'); 
 
     n.parentNode.insertBefore(f, n); 
 
     n.parentNode.removeChild(n); 
 
     } 
 
    } 
 
    //s.onkeyup 
 
    s.onkeyup = function(){ 
 
     var spans = document.getElementsByClassName('found'); 
 
     while (spans.length) { 
 
     var p = spans[0].parentNode; 
 
     p.innerHTML = p.textContent || p.innerText; 
 
     } 
 
     if (this.value) changeNode(
 
     div, new RegExp('('+this.value+')','gi') 
 
    ); 
 
    }; 
 
    </script> 
 
</body>

所以每當我鍵入的東西在輸入框中，成爲字突出。但是，我希望這種情況在沒有螞蟻輸入框的情況下自動發生，並且在綠色和離線狀態下以黃色顯示。

在此先感謝。爲什麼你需要使用Javascript來完成這樣的事情

<html> 
<head> 
    <style> 
    .green { 
     color: green; 
    } 
    .red { 
     color: red; 
    } 
    </style> 
</head> 
<body> 
    <h1 id="colouredText">This is a green text, and here a red text</h1> 
    <script> 
    var text = document.getElementById("colouredText"); 
    var words = text.innerHTML.split(" "); 
    for(var i = 0; i < words.length; i++) { 
     if(words[i] == "red") { 
     words[i] = "<span class='red'>" + words[i] + "</span>"; 
     } 
     if(words[i] == "green") { 
     words[i] = "<span class='green'>" + words[i] + "</span>"; 
     } 
    } 
    text.innerHTML = words.join(" "); 
    </script> 
</body>

來源

2016-07-26 Tim Berners Lee

爲什麼不把它們包裝在HTML的跨度？ – gcampbell

您可以使用javascript onload事件 –

在所有誠實的情況下，您目前擁有的解決方案並不適合您想要做的事情。由於@ gcampbell建議將它們分開，因爲元素會更好，並且樣式最好。 –

您可以使用此方法。至少在你解釋的方式上。

你爲什麼不能只是做這與普通的HTML像這樣：

<div id="a"> 
    i am <span style="color:green">online</span> he is <span style="color:yellow">offline</span>. 
</div>

這裏是一個JSfiddle

讓我知道，如果這有助於。

來源

2016-07-26 12:34:02

非常感謝:) –

我不明白：

來源

2016-07-26 12:40:03

''是一個HTML元素嗎？ – Rounin

@Rounin非常真實，我使用的是剃鬚刀引擎，但''是塊的剃鬚刀片段。好拿起。生病編輯 –

這裏是一個香草的javascript其中：

循環通過文檔中的元素，以找到的段落;
將段落分解爲空格分隔的單詞;
取代在線的所有實例和離線帶有樣式的span;和
重建使用這個，你包括jQuery的後段包括風格spans

var body = document.getElementsByTagName('body')[0]; 
 

 
for (var i = 0; i < body.childNodes.length; i++) { 
 
    if (body.childNodes[i].nodeName !== 'P') {continue;} 
 

 
    var textArray = body.childNodes[i].textContent.split(' '); 
 
    body.childNodes[i].textContent = ''; 
 

 
    for (var j = 0; j < textArray.length; j++) { 
 

 
     if (textArray[j] === 'online') { 
 
      var online = document.createElement('span'); 
 
      var onlineText = document.createTextNode('online'); 
 
      online.appendChild(onlineText); 
 
      online.classList.add('online'); 
 
      textArray[j] = online; 
 
     } 
 

 
     else if (textArray[j] === 'offline') { 
 
      var offline = document.createElement('span'); 
 
      var offlineText = document.createTextNode('offline'); 
 
      offline.appendChild(offlineText); 
 
      offline.classList.add('offline'); 
 
      textArray[j] = offline; 
 
     } 
 

 
     else { 
 
      textArray[j] = document.createTextNode(textArray[j]); 
 
     } 
 

 
     body.childNodes[i].appendChild(textArray[j]); 
 

 
     if (j < (textArray.length - 1)) { 
 
      var space = document.createTextNode(' '); 
 
      body.childNodes[i].appendChild(space); 
 
     } 
 
    } 
 
}

.online { 
 
color: rgb(0,255,0); 
 
} 
 

 
.offline { 
 
color: rgb(255,255,0); 
 
}

<p>upline downline inline outline underline overline online offline upline downline inline outline underline overline upline downline inline outline underline overline online offline upline downline inline outline underline overline upline downline inline outline underline overline online offline upline downline inline outline underline overline upline downline inline outline underline overline online offline upline downline inline outline underline overline</p> 
 

 
<p>underline overline online offline upline downline inline outline underline overline online offline upline downline inline outline underline overline online offline upline downline inline outline underline overline online offline upline downline inline outline underline overline online offline upline downline inline outline underline overline online offline upline downline inline outline underline overline online offline upline downline inline outline</p>

來源

2016-07-26 12:58:34 Rounin

嘗試。或者在你喜歡的時候調用startHighlightProcess方法。

$(document).ready(function(){ 
startHighlightProcess("online","onlineClass"); 
startHighlightProcess("offline","offlineClass"); 
}); 

function startHighlightProcess(keywordToHighlight,classname) 
var searchedKeyword = keywordToHighlight; 
var newClassToSet = classname; 
     function startHighlighting() {     
        highlightWord(document.body, searchedKeyword.toLowerCase()); 
      }; 



      function highlightWord(root, word) { 
var classToSet = newClassToSet; 
       textNodesUnder(root).forEach(highlightWords); 

       function textNodesUnder(root) { 
        var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false), 
         text = [], node; 
        while (node = walk.nextNode()) text.push(node); 
        return text; 
       } 

       function highlightWords(n) { 
        for (var i; (i = n.nodeValue.toLowerCase().indexOf(word, i)) > -1; n = after) { 
         var after = n.splitText(i + word.length); 
         var highlighted = n.splitText(i); 
         var span = document.createElement('span'); 
         span.className = classToSet; 
         span.appendChild(highlighted); 
         after.parentNode.insertBefore(span, after); 
        } 
       } 
      }

來源

2016-07-26 13:17:28

JQuery的 - 瞄準滿足過濾器的所有段落

var textToFind = 'online'; 

$("p:contains('" + textToFind + "')").each(function (i, element) { 
    // extract the element content 
    var content = $(element).text(); 

    // replace the text to find with the new mark up 
    content = content.replace(textToFind, '<span class="highlight">' + textToFind + '</span>'); 

    // put back into the element 
    element.html(content); 
});

注意，這將與新內容取代該段的內容，如果有與段落元素相關聯的任何處理程序他們將會失去。

小心使用。

來源

2016-07-26 13:19:30 ashto5

突出的JavaScript每次頁面加載

回答

相關問題