當通過html元素循環時替換粘貼文本

我想用戶從文檔（如gdocs或libre辦公室）粘貼時，用bbcode替換html鏈接（和最終其他元素）。所以我們正在處理已經格式化的豐富html（這就是爲什麼它需要複製HTML而不是文本）。當通過html元素循環時替換粘貼文本

本質上，我希望能夠將從文檔預先寫入的東西複製到我的網站上的textarea中，而無需在原始文檔中手動寫入BBCode標籤（因爲它對於校對閱讀而言很麻煩）。

感謝這裏的幫助Adjust regex to ignore anything else inside link HTML tags我已經主要在那裏，但我堅持用原始文本替換找到的標籤。

這是我有：

function fragmentFromString(strHTML) { 
    return document.createRange().createContextualFragment(strHTML); 
} 

    $('textarea').on('paste',function(e) { 
    e.preventDefault(); 
    var text = (e.originalEvent || e).clipboardData.getData('text/html') || prompt('Paste something..'); 
    var fragment = fragmentFromString(text); 
    var aTags = Array.from(fragment.querySelectorAll('a')); 

    aTags.forEach(a => { 
     text = text.replace(a, "[url="+a.href+"]"+a.textContent+"[/url]"); 
    }); 

    window.document.execCommand('insertText', false, text); 
});

你可以看到它遍歷找到a標籤，我基本上是試圖從與新的東西，原來的文本替換它們。

這裏是一個可以粘貼的內容的類型（這是從谷歌文檔的單個鏈接）的例子：

[url=https://www.test.com]Link test[/url]

所以我想：

<a href="https://www.test.com" style="text-decoration:none;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Link test</span></a>

預計將被替換該HTML代替了原始文本中的BBCode，然後通過粘貼將其發送到textarea。

來源

2016-12-21 NaughtySquid

aTags foreach目前什麼都不做。您需要創建一個新的文本節點，並用它替換現有的錨標籤。

aTags.forEach(a => { 
    var new_text = document.createTextNode("[url=" + a.href + "]" + a.textContent + "[/url]"); 
    a.parentNode.insertBefore(new_text, a); 
    a.parentNode.removeChild(a); 
}); 

window.document.execCommand('insertText', false, text.innerText);

這會將每個標籤替換爲給定的文本。

來源

2016-12-21 19:25:50 Whothehellisthat

讓我知道如果這不是你想要的，我會看看我是否可以調整它。 – Whothehellisthat

您的新編輯並未解決實際將其替換爲隨後在貼上呈現給用戶的文本中。 – NaughtySquid

「提交給用戶的文字」是什麼意思？ – Whothehellisthat

當通過html元素循環時替換粘貼文本

回答

相關問題