用另一个元素包装HTML元素

本文关键字:元素 HTML 包装 另一个 | 更新日期: 2023-09-27 17:53:16

我正在编写一个解析HTML的程序。具体来说,我正在寻找列表中的下划线元素,并将这些下划线元素转换为超链接。

下面是一个预转换的HTML示例:

<ul>
  <li>
    <u>Mode selector </u>
  </li>
  <li>
    <u>LAND ALT</u>
  </li>
  <li>
    <u>FLT ALT</u>
  </li>
</ul>

下面是我想要的结果:

<ul>
  <li>
    <a id="triv14522" onclick="TxtLinkAction(15627,15673)">
      <span style="color: rgb(102, 204, 255); font-size: 11pt;">
        <u>Mode selector</u>
      </span>
    </a>
  </l1>
  <li>
    <a id="triv14523" onclick="TxtLinkAction(15627,15674)">
      <span style="color: rgb(102, 204, 255); font-size: 11pt;">
        <u>LAND ALT</u>
      </span>
    </a>
  </li>
    <a id="triv14887" onclick="TxtLinkAction(15627,15679)">
      <span style="color: rgb(102, 204, 255); font-size: 11pt;">
        <u>FLT ALT</u>
      </span>
    </a>
  </li>
</ul>

在我的程序中,我已经为每个带下划线的元素构建了锚和span元素。仅供参考,我是这样做的:

TrivId = trivId;
ActionItemId = actionItemId;
TextLayerId = textLayerId;
var trivIdText = "id='"triv" + TrivId + "'"";
var onClickText = "onclick='"TxtLinkAction(" + TextLayerId + "," + ActionItemId + ")'"";
var anchor = "<a " + trivIdText + " " + onClickText + ">";
var span = "<span style='"color: rgb(102, 204, 255); font-size: 11pt;'">";  

所以,我的主要问题是我不知道如何"包装"列表中每个带下划线的元素与我的锚和span元素。如果这是XML,我可以使用AddBeforeSelf添加XML元素。我可以用HTML做类似的事情吗?

注意:我注意到c#标签已被删除,Javascript标签添加。我应该澄清一下:这是一个c#程序,正在解析PowerPoint文档。其中一个引入的值是HTML格式的。我根本没有使用Javascript,因为这不是一个实际的网页。我只是从ppt幻灯片中获取了这个值,它恰好是HTML格式的

为了进一步澄清,这里是我使用的c#方法。得到的修改后的HTML将被写入XML文件。生成的HTML将存储在XML标记<RTF>中,有效的HTML作为该标记的值。

public Hyperlink(int textLayerId, int runGroupId)
        {
            TrivId = LectoraTitle.GetId();
            ActionItemId = LectoraTitle.GetId();
            TextLayerId = textLayerId;
            var trivIdText = "id='"triv" + TrivId + "'"";
            var onClickText = "onclick='"TxtLinkAction(" + TextLayerId + "," + ActionItemId + ")'"";
            var styleText = "style='"" + Settings.Default.Style + "'"";
            // build anchor/span and determine where to insert into text.text
            var anchor = "<a " + trivIdText + " " + onClickText + " " + styleText + ">";
            var span = "<span style='"color: rgb(102, 204, 255); font-size: 11pt;'">";  
            ActionItem = new ActionItem { ActionType = ActionType.rungroup, TargetId = runGroupId };
        }
进一步解释:我假设我可以使用foreach循环遍历HTML元素,使用如下代码:
    // note: this is pseudocode
    var nodes = htmlSnippet;
    foreach (var node in nodes)
    {
            // if node is underline element
            // surround node with generated anchor
            // and span elements.
    }

我只是不太确定如何使我的HTML片段进入可枚举状态,以便我可以遍历它,然后用生成的元素包装特定的元素。

新编辑:因此,在查看了htmllagilitypack之后,我将其合并到我的程序中,并像这样迭代Html(变量text包含Html值(参见上面的第一个示例)):

htmlDocument.LoadHtml(text);
var nodes = htmlDocument.DocumentNode.SelectNodes("//u");
foreach (var node in nodes)
{
   // insert code here to wrap the 
   // underline element with the generated
   // anchor/span elements
}

所以,现在我能够解析HTML并只获得下划线元素。我现在需要弄清楚如何用生成的锚/span元素包围这些下划线元素。我希望我可以做一些像node.AddParent(anchor)

用另一个元素包装HTML元素

为了迭代HTML,你可能需要使用HTML敏捷包

http://htmlagilitypack.codeplex.com/

例子:

http://htmlagilitypack.codeplex.com/wikipage?title=Examples

一个像样的指南:

http://www.codeproject.com/Articles/659019/Scraping-HTML-DOM-elements-using-HtmlAgilityPack-H