javascript - 如何在文本html中获取一个单词并在其下划线?

标签 javascript html css

<分区>

我在 HTML 标签内有一个文本 <p>text</p> , 然后我有一个 <form>和一个 <input type="text">里面和一个提交。

练习的目标:当我在输入中写字符然后点击按钮(提交),或任何其他词,或不是一个完整的词,或(,.!!),它必须带有下划线文本中的红色空格不必加下划线。这是我下面的代码:示例我写“任何人”然后我提交,我的意思是文本中的第一个单词,所有单词“任何人”都必须加下划线红色。

var x = document.getElementById('text').innerHTML;
var splt = x.split(/\W+/);
console.log(splt);

var inpt=document.getElementById('input').value;
console.log(inpt);

var lent = splt.length;
console.log(lent);

var myArray =[" "];

for(  i = 0; i < splt.length ; i++ ){
  myArray.push(splt[i]);
}

console.log(myArray);

for(var j=0;i<myArray.length;i++){
  for(var k=0;k<myArray[i].length;k++){
    if((myArray[j]==splt)){

    }
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-5">
      <form class="form-group" action="index.html" method="post">
        <input type="text" name="" value="" id ="input" onkeyup="find()" placeholder="cerca">
        <button class ="Btn btn-danger" type="button" name="button">search</button>
      </form>
      <h1>hello</h1>
      <p class="text-justify" id = "text">Anyone who reads Old and Middle English literary texts will be familiar with the mid-brown volumes of the EETS, with the symbol of Alfred's jewel embossed on the front cover. Most of the works attributed to King Alfred or to Aelfric, along with some of those by bishop Wulfstan and much anonymous prose and verse from the pre-Conquest period, are to be found within the Society's three series; all of the surviving medieval drama, most of the Middle English romances, much religious and secular prose and verse including the English works of John Gower, Thomas Hoccleve and most of Caxton's prints all find their place in the publications. Without EETS editions, study of medieval English texts would hardly be possible.</p>
      <p class="text-justify" id = "text">As its name states, EETS was begun as a 'club', and it retains certain features of that even now. It has no physical location, or even office, no paid staff or editors, but books in the Original Series are published in the first place to satisfy subscriptions paid by individuals or institutions. This means that there is need for a regular sequence of new editions, normally one or two per year; achieving that sequence can pose problems for the Editorial Secretary, who may have too few or too many texts ready for publication at any one time. Details on a separate sheet explain how individual (but not institutional) members can choose to take certain back volumes in place of the newly published volumes against their subscriptions. On the same sheet are given details about the very advantageous discount available to individual members on all back numbers. In 1970 a Supplementary Series was begun, a series which only appears occasionally (it currently has 24 volumes within it); some of these are new editions of texts earlier appearing in the main series. Again these volumes are available at publication and later at a substantial discount to members. All these advantages can only be obtained through the Membership Secretary (the books are sent by post); they are not available through bookshops, and such bookstores as carry EETS books have only a very limited selection of the many published.</p>
   </div>
 </div>
</div>

最佳答案

 function highLightText(){
         var characters = $('#text');
            var pageText = characters.text().replace("<span>","").replace("</span>");
            var searchedText = $('#input').val();
            var theRegEx = new RegExp("("+searchedText+")", "igm");   
            var newText = pageText.replace(theRegEx ,"<span>$1</span>");
            characters.html(newText);
         }
         
#text span
         {
         text-decoration: underline;
         text-decoration-color: red;
         }
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>SEARCH</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="container-fluid">
         <div class="row">
            <div class="col-5">
               <input type="text" name="" value="" id ="input" onkeyup="find()" placeholder="cerca">
               <button class ="Btn btn-danger" type="button" name="button" onclick="highLightText()">search</button>
               <h1>hello</h1>
               <p class="text-justify" id = "text">
                  Anyone who reads Old and Middle English literary texts will be familiar with the mid-brown volumes of the EETS, with the symbol of Alfred's jewel embossed on the front cover. Most of the works attributed to King Alfred or to Aelfric, along with some of those by bishop Wulfstan and much anonymous prose and verse from the pre-Conquest period, are to be found within the Society's three series; all of the surviving medieval drama, most of the Middle English romances, much religious and secular prose and verse including the English works of John Gower, Thomas Hoccleve and most of Caxton's prints all find their place in the publications. Without EETS editions, study of medieval English texts would hardly be possible.
                  As its name states, EETS was begun as a 'club', and it retains certain features of that even now. It has no physical location, or even office, no paid staff or editors, but books in the Original Series are published in the first place to satisfy subscriptions paid by individuals or institutions. This means that there is need for a regular sequence of new editions, normally one or two per year; achieving that sequence can pose problems for the Editorial Secretary, who may have too few or too many texts ready for publication at any one time. Details on a separate sheet explain how individual (but not institutional) members can choose to take certain back volumes in place of the newly published volumes against their subscriptions. On the same sheet are given details about the very advantageous discount available to individual members on all back numbers. In 1970 a Supplementary Series was begun, a series which only appears occasionally (it currently has 24 volumes within it); some of these are new editions of texts earlier appearing in the main series. Again these volumes are available at publication and later at a substantial discount to members. All these advantages can only be obtained through the Membership Secretary (the books are sent by post); they are not available through bookshops, and such bookstores as carry EETS books have only a very limited selection of the many published.
               </p>
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Reference

关于javascript - 如何在文本html中获取一个单词并在其下划线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48941056/

相关文章:

javascript - 为单个父单击显示/隐藏多个子类(Jquery)

javascript - 无法在程序启动时获取隐藏选项

css - 是否有 "previous sibling"选择器?

javascript - 如何分别将可拖动元素附加到多个可放置 div

javascript - 如何将 ng-style 属性设置为等于对象值?

javascript - 跳出 FOR 循环

Javascript - 如何从元素的 css 文件中获取所有匹配的类和选择器

javascript - 桌面/iOS SAFARI 中的 MP3 文件持续时间无限

html - 富文本IDE

html - 为什么 IE9 在我的网站上切换到兼容模式?