Question

我在网页上有一些文字要呈现给HTML。文字如下：

<p>
    <span style="font-family: Arial">
        <span style="font-size: x-small">
            <img border="5" hspace="10" alt="" align="left" width="200" height="150" src="/Solutions/image/Lighthouse.jpg" />

我想将其显示为HTML即。正确呈现元素。它设置为span，ID为：

<span class="VIEWBOX" id="_Datasoln_solutiondetails">

如何使用jQuery或Javascript实现这一目标？

Answer 1

您是说当页面加载时页面上呈现的HTML看起来像这样吗？

<p>
  <span style="font-family: Arial">
    <span style="font-size: x-small">
       <img border="5" hspace="10" alt="" align="left" width="200" height="150" src="/Solutions/image/Lighthouse.jpg" />
    [missing /span]
  [missing /span]
[missing /p]

或者只是在编程/脚本编写过程中的某个地方准备的html或文本？

要回答这个问题，我认为你的网页上已有文字/ html。

因此，在这种情况下，如果您无法控制上述html代码段在页面上的显示方式，您可以使用jQuery来转换代码。并且会有一些功夫战斗，

您是说您已拥有带有ID的SPAN？或者你会注入（或附加）现有的HTML？

<span class="VIEWBOX" id="_Datasoln_solutiondetails">

目前，我猜测具有ID的SPAN尚不存在。在这种情况下，按照以下方式做一些事情：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Library Contents</title>
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
  <script type="text/javascript">
     $(document).ready(function(){
 // GET THE IMAGE AS A REFERENCE POINT
 var x = $("img[src='/Solutions/image/Lighthouse.jpg']");
 // TEST
//      $(x).hide();

//  GET THE IMAGE HTML TAG
var htmlStr = $(x).parent().html();
//  TEST
console.log("htmlStr: " + htmlStr);

//  DESIRED HTML
var newHtml = '<span class="VIEWBOX" id="_Datasoln_solutiondetails">' + htmlStr + '</span>';
//  TEST
// console.log("newHtml: " + newHtml);
$(x).parent().parent().replaceWith(newHtml);
 });  
 </script>
</head>
<body>
  <p>
    <span style="font-family: Arial">
      <span style="font-size: x-small">
        <img border="5" hspace="10" alt="" align="left" width="200" height="150" src="/Solutions/image/Lighthouse.jpg" />
      </span>
    </span>
  </p>
</body>
</html>

Answer 2

您可以使用正则表达式执行此操作，使用javascript：

varname.replace(/<(span|p) [a-zA-Z0-9=":; -/]+>/g, /<$1 id="newid" class="newclass">/g);

您可以将span | p更改为span | p | b | img等以获取您想要的其他标记。

<强>更新

var str = '<p> <span style="font-family: Arial"><span style="font-size: x-small"><img border="5" hspace="10" alt="" align="left" width="200" height="150" src="/Solutions/image/Lighthouse.jpg" />';
var newvar = str.replace(/<(span|p) [a-zA-Z0-9=":; -/]+>/g, /<$1 id="newid" class="newclass">/g);
alert(newvar);

将页面文本转换为HTML

2 个答案: