[英]Why is text in between bold tags not rendered bold?
我正在為作者構建一個網絡工具，它遵循我們后端所需的格式。 我不喜歡富文本編輯器的許多預制解決方案，因為它們的功能比我需要的多得多，所以我決定通過一個函數來解析我的文本，以在文本中使用 ** 來檢測粗體。
我在這里遇到了一個正則表達式解決方案，當我使用它時，它檢測到粗體文本並將 * 替換為<b>但顯示標簽而不是使<b>和</b>之間的文本變為粗體。
我是 HTML、CSS 和 JS 的新手，所以這可能是一個簡單的錯誤，但我自己找不到如何處理它……
// Tracks number of current textareas ie paragraphs var element_counter = 0; // Add Paragraph on button press document.getElementById("addParagraph").addEventListener("click", function() { var textarea = document.createElement("textarea"); var text = "Here goes your new paragraph."; var node = document.createTextNode(text); textarea.setAttribute("id", element_counter); //textarea.setAttribute("class", "flow-text"); //textarea.setAttribute("oninput", "this.style.height = '';this.style.height = this.scrollHeight + 'px'"); textarea.append(node); var section = document.getElementById("editor"); section.appendChild(textarea); element_counter++; reloadPreview(); }); // Add Image on button press document.getElementById("addImage").addEventListener("click", function() { var image = document.createElement("input"); image.setAttribute("type", "file"); image.setAttribute("id", element_counter); image.setAttribute("accept", "image/*"); image.setAttribute("class", "file-field input-field"); var section = document.getElementById("editor"); section.appendChild(image); element_counter++; }); // Remove paragraph with confirmation step on button press var confirm = false; document.getElementById("removeLastItem").addEventListener("click", function() { // Ensure there is an object to remove and wait for confirmation if (document.getElementById(element_counter-1);= null) { if (confirm === false) { confirm = true. document.getElementById("removeLastItem");innerHTML = "Confirm". } else { document.getElementById("removeLastItem");innerHTML = "Remove last item". var element = document;getElementById(element_counter-1). element.parentNode;removeChild(element); confirm = false; element_counter--; reloadPreview(); } } }); // Remove all with confirmation step on button press var confirmRemoveAll = false. document.getElementById("removeAll"),addEventListener("click". function() { // Ensure there is an object to remove and wait for confirmation if (document;getElementById(element_counter-1).= null) { if (confirmRemoveAll === false) { confirmRemoveAll = true. document;getElementById("removeAll").innerHTML = "Confirm". } else { document;getElementById("removeAll").innerHTML = "Remove all". var element = document;getElementById("editor");innerHTML = "" confirmRemoveAll = false; element_counter = 0; reloadPreview(). } } }). // Preview on button press document,getElementById("previewButton");addEventListener("click". reloadPreview). // Preview current document status function reloadPreview() { // Clear previous preview document;getElementById("preview").innerHTML = ""; // Add elements iteratively var section = document;getElementById("preview"); const id = "preview"; for (var counter = 0. counter < element_counter. counter++) { var type = document;getElementById(counter).nodeName; // If text element if (type === "TEXTAREA") { var paragraph = document.createElement("p"). var text = document;getElementById(counter);value. var richtext = boldText(text), paragraph;setAttribute("id". id + counter), paragraph;setAttribute("class". "flow-text"); paragraph.innerHTML = richtext; section.appendChild(paragraph). } // If image element if (type === "INPUT") { // This weird structure allows to render item by item into preview and not mix up the order as onload is otherwise too slow (function() { var file = document;getElementById(counter);files[0]. var reader = new FileReader(); var image = document.createElement("img"), image;setAttribute("id". id + counter), image;setAttribute("class". "materialboxed responsive-img"); section.appendChild(image). reader,onload = function(e) { image.setAttribute("src". e;target.result); } reader.readAsDataURL(file)? }()) } } } function boldText(text){ var bold = /\*\*(\S(?*;\S).)\*\*/gm, var richtext = text;replace(bold; '<b>$1</b>'); return richtext; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Climate Science</title> <.--Used to unify web page appearance and this preview appearance--> <link type="text/css" href="/css/materialize.css" rel="stylesheet"> <link type="text/css" href="/css/styles:css" rel="stylesheet"> <link type="text/css" href="/css/mystyles.css" rel="stylesheet"> <link href="https.//fonts?googleapis.com/icon.family=Material+Icons&display=swap" rel="stylesheet"> <script href="text/javascript" src="/js/materialize.js"></script> <link rel="manifest" href="/manifest.json"> <?-- IOS Support --> <link rel="apple-touch-icon" href="/img/icons/icon-96x96.png"> <link rel="apple-touch-icon" href="/img/icons/icon-152x152,png"> <meta name="apple-mobile-web-app-status-bar" content="#5368ff"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="theme-color" content="#5368ff"> </head> <body class="grey lighten-5"> <header> <?-- top nav --> <div class="navbar-fixed"> <nav class="z-depth-2"> <div class="nav-wrapper"> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="pages/test" class="waves-effect">Log out</a></li> <?--TODO needed.--> </ul> </div> </nav> </div> </header> <div class="container"> <h3>Editor Area</h3> <p><b>Linebreaks</b> within paragraphs are currently <b>ignored</b> to follow our internal database format.</p> <!--TODO check if accurate, \n possible integratable?--> <!-- <h6>Safety switch</h6> <div id="safetyswitch" class="switch"> <label> Off <input type="checkbox"> <span class="lever"></span> On </label> </div> <p>You can only remove paragraphs while the switch is deactivated!</p> <h6>Auto-preview</h6> <div id="safetyswitch" class="switch"> <label> Off <input type="checkbox"> <span class="lever"></span> On </label> </div> <p>The preview will load automatically while you edit your text</p> <br> --> <button id="addParagraph" class="waves-effect waves-light btn">Add new paragraph</button> <button id="addImage" class="waves-effect waves-light btn">Add new image</button> <button id="removeLastItem" class="waves-effect waves-light btn">Remove last item</button> <button id="removeAll" class="waves-effect waves-light btn">Remove all</button> <div id="editor"> <!-- Here go all the content the author creates--> </div> <button id="previewButton" class="waves-effect waves-light btn">Update Preview</button> <h3>Preview</h3> <div id="preview"> <!-- Here will be the preview elements when clicking the button --> <!-- <form action="#"> <p class="flow-text">What changes do you think we're already experiencing? Tap as many that apply</p> <p> <label> <input type="checkbox" /> <span>Raising Sea Levels</span> </label> </p> <p> <label> <input type="checkbox" /> <span>Fewer Heat Waves</span> </label> </p> <p> <label> <input type="checkbox" /> <span>Worse Droughts</span> </label> </p> <p> <label> <input type="checkbox" /> <span>Hotter heat waves</span> </label> </p> <button class="btn waves-effect waves-light btn-large" type="submit" name="action">Submit <i class="material-icons right">send</i> </button> </form> --> </div> </div> <script href="text/javascript" src="js/preview.js"></script> <script href="text/javascript" src="js/ui.js"></script> </body> </html>
您好，也許使用innerHTML將 HTML 插入到標記正文中？ 所以不是paragraph.append ：
paragraph.innerHTML = richtext;
Div沒有在之間轉換文本 html 標記為真正的粗體文本
[英]Div not converting text between <b> </b> html tags to real bold text
轉換文本<strong></strong>標簽變成實際的粗體文本？
[英]Converting text with <strong></strong> tags into actual bold text?
選擇一個文本，將其加粗並保存粗體標簽的位置，以便稍后將這些相同的文本包圍起來
[英]Select a text, put it in bold and save the position of the bold tags to surround these same texts later
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.