Question

我想在任意长度的任意位置上改变文本部分的样式。例如，我在我的html中有这个

<span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span>

给定变量start和length，这可能是我不知道的任何有效值，我应该更改特定文本的颜色。

我该如何完成这项任务？

Answer 1

尝试以下代码。它应该工作：

<!DOCTYPE html>
<html>
  <head>
<meta charset="UTF-8">
<style>
  .Inlinetext{ color:red;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  function ChangeTextColour(start,end){
    var startingHtml = "<span class='Inlinetext'>";
    var endingHtml="</span>";
    var middleHtml=$("#Inlinetext").html().substring(start, end);
    $("#Inlinetext").html($("#Inlinetext").html().substring(0, start)+startingHtml+middleHtml+endingHtml+$("#Inlinetext").html().substring(end));
  }
</script>

  </head>
  <body onload="ChangeTextColour(3,100)">
<span id="Inlinetext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  </body>
</html>

您只需要提及将改变样式表的字符串的开始和结束位置。     如果您希望使用多个样式表，请使用CSS标记。

Answer 2

找到要匹配的字符串，并将其替换为span包装并突出显示。

http://bartaz.github.io/sandbox.js/jquery.highlight.html这是示例插件

Answer 3

以下是您需要的简单javascript实现。https://jsfiddle.net/ewgsyn10/

如果您想将css应用于该特定部分，则可以使用<span class="your-css-class">代替<b>，类似地使用结束标记。

Answer 4

您将动态地在此范围内插入另一个范围。我在javascript中编写了以下代码来做同样的事情。希望它会对你有所帮助。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .text{ color:red;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
      function ChangeColor(start,end){
        var newStartHtml = "<span class='text'>";
        var newEndHtml="</span>";
        var midHtml=$("#text").html().substring(start, end);
        $("#text").html($("#text").html().substring(0, start)+newStartHtml+midHtml+newEndHtml+$("#text").html().substring(end));
      }
    </script>

  </head>
  <body onload="ChangeColor(3,15)">
    <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  </body>
</html>

＆＃13;

如何更改html文本

4 个答案: