簡體   English   中英

Javascript字符串替換所有范圍

[英]Javascript string replace all span

我有一個HTML字符串,我想替換所有包含替換文本類的跨度

var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter';

預期輸出為:

{{58d4aa82c887136a08dbedf5}}Hello{{58d4aa82c887136a08dbedf4}}Other string charatcter

手段:

{{span_id}}middle string{{span_id}}

據我了解,您想為span元素提供id屬性的innerText

干得好 :

 var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span> Hello <span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span> Other string charatcter'; $('#container').html(html); $('.replace_text').each(function() { // We iterate over all such elements $(this).text('{{' + $(this).attr('id') + '}}'); // We get vaue in the id attribute and add it to the span }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='container'></div> 

正如您使用jQuery標記答案一樣,我使用相同的解決方案

您可以創建一個元素,將.innerHTML設置為html ,使用.find() $.map()迭代span元素,返回span .id.nextSibling .textContent ,在結果數組上使用參數""調用.join()從數組創建字符串。

 var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter'; var res = $.map($("<div>", {html:html}).find("span"), function(el) { return "{{" + el.id + "}}" + el.nextSibling.textContent }).join(""); $("body").append(res); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

我建議創建一個虛擬元素並使用DOM API。 任何用於解析/修改HTML字符串的正則表達式解決方案都是垃圾。

 const prepareHtml = html => { var fragment = document.createElement('div') fragment.innerHTML = html for (let span of fragment.querySelectorAll('span.replace_text')) span.innerHTML = `{{${span.id}}}` return fragment.innerText } var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter' console.log(prepareHtml(html)) // {{58d4aa82c887136a08dbedf5}}Hello{{58d4aa82c887136a08dbedf4}}Other string charatcter 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM