文本域带格式的内容，展示在div中，保存格式，并且url变成超链接

最新推荐文章于 2022-11-03 09:54:54 发布

visionke

最新推荐文章于 2022-11-03 09:54:54 发布

阅读量370

点赞数

分类专栏： js 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/visionke/article/details/125996127

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

组件页

import React from "react";

const FormatDiv = (props = {}) => {
  if (!props.content) {
    return null;
  }
  let urlPattern = /(https?:\/\/|www\.)[a-zA-Z_0-9\-@]+(\.\w[a-zA-Z_0-9\-:]+)+(\/[\(\)~#&\-=?\+\%/\.\w]+)?/g; // eslint-disable-line no-useless-escape
  let content = props.content.replace(urlPattern, function(match) {
    var href = match;
    if (match.indexOf("http") === -1) {
      href = "http://" + match;
    }
    return '<a target="_blank" href="' + href + '">' + match + "</a>";
  });

  return (
    <div
      style={{
        display: "inline-block",
        maxWidth: props.maxWidth ? props.maxWidth : "680px",
        maxHeight: props.maxHeight ? props.maxHeight : "300px",
        overflowY: "auto"
      }}
      dangerouslySetInnerHTML={{
        __html: content
          .toString()
          .split("\n")
          .join("<br/>")
      }}
    />
  );
};

export default FormatDiv;

调用页

                <div className="contentmessage">
                  <FormatDivWithUrl
                    {...{
                      content: content,
                      maxHeight: "250px",
                      maxWidth: "700px"
                    }}
                  />
                </div>