Question

我正在构建一个reactjs应用程序。我得到html内容为字符串。例如：

  state= {elem:`<div>
          <p>...</p>
          <a href="www.twitter.com"></a>
          <h1>Heading</h1>
          <div>
            <a href="www.facebook.com"></a>
          </div>
        </div>`.}

我将使用<div dangerouslySetInnerHTML={this._createMarkup()} />

在我的dom中设置此项

 _createMarkup = () => {
        return { __html: this.state.elem};
    };

我没有直接在dom中渲染这个html片段，而是需要解析它并进行修改。也就是说，无论何处有锚标记，我都需要附加http：//如果href属性中不存在它。代码段中可以有多个锚标记。我怎样才能做到这一点？

Answer 1

您可以使用广泛支持的DOMParser来实现这一目标。

这是一个小片段。

＆＃13;

const parser = new DOMParser();
const htmlText = `<div>
          <p>...</p>
          <a href="www.twitter.com">Twitter</a>
          <h1>Heading</h1>
          <div>
            <a href="www.facebook.com">Facebook</a>
          </div>
        </div>`;

let content = parser.parseFromString(htmlText, "text/html");
const anchors = content.getElementsByTagName('a');


Array.from(anchors).forEach(v => {
  const href = v.getAttribute("href");

  if (!href.includes('http://')) {
    v.href = 'http://' + href;
  }
})


console.log(content.body.innerHTML); // Here it is your new string

const App = () => (
  <div>
    <div dangerouslySetInnerHTML={{ __html: content.body.innerHTML}} />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

＆＃13;

如何在reactjs中以编程方式修改dom元素？

1 个答案: