Javascript - 獲取元素的格式化文本內容？

Question

假設我有以下 div：

<div id="some-div">
   <div id="sub-div">Lorem <b>ipsum</b> dolor <a href="https://www.example.com/">sit</a> amet, consectetur adipisici elit</div>
</div>

現在，當我得到這個 div 的 textContent 時，我得到Lorem ipsum dolor sit amet, consectetur adipisici elit 。 我想要的是Lorem <b>ipsum</b> dolor sit amet, consectetur adipisici elit （它也可以是<b>以外的其他標識符，表示“ipsum”是粗體）。

我不想要像<a> -Link 這樣的東西（因為那只是sub-div的innerHTML ）。

Answer 1

這些方面的東西可能有用嗎？

將您想要的標簽轉換為非 html 標記（如 bb 代碼）

閱讀 innerText 以刪除所有其他 html 標記

將 bb 代碼轉換回 html

更新

按“CLICK”文本，結果將打印到控制台

 function replaceTag(node, tag) { let tags = node.querySelectorAll(tag) tags.forEach( (item) => { item.outerHTML = `[${tag}]${item.innerHTML}[/${tag}]` }) } function ex() { // create a clone to mutate let node = document.getElementById("targetNode").cloneNode(true) // list of desired tags let tags = ["b", "i", "u", "s"] // replace tags with bb code style markup tags.forEach ( (tag) => { replaceTag(node,tag) }) // print the innerText to console (replacing bb code with html) console.log(node.innerText.replace(/\[([bius])\](.+?)\[\/\1\]/g,'<$1>$2</$1>')) }

 <div id="targetNode"><span>Span</span><b>BOLD</b><i>italic</i><s>strike</s></div> <div onclick="ex()">CLICK</div>

更新

沒有經過全面測試，給定一個節點和所需標簽列表，它應該返回類似 innerText 的內容，並保留所需的標簽（盡管它不會保留與它們關聯的任何屬性）

function getFilteredHTML(targetNode, tags = ["b", "i", "u", "s"]) {
    let node = targetNode.cloneNode(true)
    let expr = new RegExp("\\[("+tags.join("|")+")\\](.+?)\\[\\/\\1\\]","g")
    tags.forEach( (tag) => {
        let searchTag = node.querySelectorAll(tag)
        searchTag.forEach( (item) => { item.outerHTML = `[${tag}]${item.innerHTML}[/${tag}]` } )
    })
    return node.innerText.replace(expr,'<$1>$2</$1>')
}