Question

我具有单击按钮即可运行的功能。此函数将在特定元素内获取所有HTML。很好但是，我想先清理返回的字符串（HTML），然后再在函数中进一步使用它：

exportHTML(){
  const element = document.getElementById('content');
  const innerHTML = element.innerHTML;
}

这有效。但是由于使用了Angular，因此基于源代码中的条件，Angular语法已包含在HTML中。例如：

<div _ngcontent-c1=""></div>

OR

<div ng-reflect-klass="panel album"></div>
<div ng-reflect-ng-class="blue"></div>

是否可以过滤掉这些类型的值？关于上面的第二个和第三个示例，其中的类将经常更改：

是否可以过滤并删除所有 _ngcontent-c1 =“” 文本
是否可以过滤并删除所有 ng-reflect-ng-class 和 ng-reflect-ng-class ，包括以下打开和关闭的引号（以删除内部）

Answer 1

好，因此属性将是恒定的，但是属性的值会改变吗？如果是这样，您可以尝试以下方法：

.replace（/ ng-reflect-klass = \“。？\” /，“”）。replace（/ ng-reflect-ng-class = \“。？\” / ，“”）。replace（/ _ ngcontent-c1 = \“。*？\” /，“”）

var content = 'stuff<div ng-reflect-klass="panel album"></div><div ng-reflect-ng-class="blue"></div><div _ngcontent-c1=""></div>end stuff';

console.log(content.replace(/ng-reflect-klass=\".*?\"/g,"").replace(/ng-reflect-ng-class=\".*?\"/g,"").replace(/_ngcontent-c1=\".*?\"/g,""));

查看控制台以查看结果。

Answer 2

您可以使用RegExp来完成

const innerHTML = element.innerHTML.replace(/ (_ngcon|ng-).*?".*?"/g, '');

(_ngcon|ng-)找到_ngcon或ng-，包括空格作为第一个字符
.*?"匹配所有内容，直到第一个"
.*?"并再次匹配所有内容以结束"

Answer 3

以下解决方案将从元素中删除所有属性：

您可以先获取所有children。然后使用forEach()遍历它们。在每次迭代中，您可以使用while循环到removeAttribute()直到元素中存在它们。

尝试以下方式：

    {    
"authorities": [
        {
          "authority": "ROLE_USER"
        }
      ],
      "details": {
        "remoteAddress": "0:0:0:0:0:0:0:1",
        "sessionId": "rkkveY_Xa5zFFd0SKu9Of_FLGRnbdiTPHdnpj4gc",
        "tokenValue": "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJ3NHVLTVdXNDlHd0xsLWdha3A5dEFvNnN1N25BZGRkcG85VWwxcFlBQkpv In0.eyJqdGkiOiIwYTQ4ZjMxMC0wNzc0LTQzOTgtYWQ5Mi1iZWQwYjE2MmE0MWUiLCJleHAiOjE1NDg5MDA1MzQsIm5iZiI6MCwiaWF0IjoxNTQ4OTAwMjM0LCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjkwODAvYXV0aC9yZWFsbXMvamhpcHN0ZXIiLCJhdWQiOiJhY2NvdW50Iiwic3ViIjoiZjM0OGJiYmItOTQ0MS00NTQzLTk5NDAtOWRhMzFlNTBkO Dc3IiwidHlwIjoiQmVhcmVyIiwiYXpwIjoid2ViX2FwcCIsImF1dGhfdGltZSI6MCwic2Vzc2lvbl9zdGF0ZSI6IjM2ZTFhZWE5LTA0OTMtNDE2Mi04NTBiLWUwODdkNWFjMTc4NyIsImFjciI6IjAiLCJhbGxvd2VkLW9yaWdpbnMiOlsiaHR0cDovL2xvY2FsaG9zdDo4MDgwIiwiaHR0cDovL2xvY2FsaG9zdDo5MDAwIl0sInJlYWxtX2FjY2VzcyI6ey Jyb2xlcyI6WyJvZmZsaW5lX2FjY2VzcyIsIlJPTEVfQURNSU4iLCJ1bWFfYXV0aG9yaXphdGlvbiJdfSwicmVzb3VyY2VfYWNjZXNzIjp7IndlYl9hcHAiOnsicm9sZXMiOlsiUk9MRV9VU0VSIiwiUk9MRV9BRE1JTiJdfSwiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWx lIl19fSwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJuYW1lIjoiQWRtaW4gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IkFkbWluIiwiZmFtaWx5X25hbWUiOiJBZG1pbmlzdHJhdG9yIiwiZW1haWwiOiJhZG1pbkBsb2NhbGhvc3QifQ.G9_fD -v_TBpqf4yRwVtGfULjTktDfOUv84btBoZFgmte_1IMWTuFkzFks1DSNmaQ8nVLF15OpZrrrPhP2VNdL-4UJbeho6F2VEt3JYUIbN-F4R7bG2GGdKKMKQwbAYZn9o-FJ7bcyNTEUrW0LfdoIE00BtyeYKyTWG7SrW5qup2s1RuIvYOjEw4X4nGZhY9qglAqbZQD5CnNFqvWE34f5mw1393EEplOpohQVHXuvNYSl-4gpS6bJFpknwDgzBNer8ph2nQpjeeBzy Lxod79dPEqrxcbww4MahfupzcpcwUqb-GjL74dFD5vzJXifjlAPymnYE542jhcdvJDtGqx0w",
        "tokenType": "bearer",
        "decodedDetails": null
      },
      "authenticated": true,
      "userAuthentication": {
        "authorities": [
          {
            "authority": "ROLE_USER"
          }
        ],
        "details": {
          "sub": "f348bbbb-9441-4543-9940-9da31e50d877",
          "email _verified": true,
          "name": "Admin Administrator",
          "preferred_username": "admin",
          "given_name": "Admin",
          "family_name": "Administrator",
          "email": "admin@localhost"
        },
        "authenticated": true,
        "principal": "Admin Administrator",
        "credentials": "N/A",
        "name": "Admin Administrator"
      },
      "clientO nly": false,
      "principal": "Admin Administrator",
      "oauth2Request": {
        "clientId": "web_app",
        "scope": [

        ],
        "requestParameters": {

        },
        "resourceIds": [

        ],
        "authorities": [

        ],
        "approved": true,
        "refresh": false,
        "redirectUri": null,
        "responseTypes": [

        ],
        "extensions": {

        },
        "grantType": null,
        "refreshTok enRequest": null
      },
      "credentials": "",
      "name": "Admin Administrator"
    }

{
    "generator-jhipster": {
        "promptValues": {
            "packageName": "xxxxxxxxxxx"
        },
        "jhipsterVersion": "5.7.2",
        "applicationType": "monolith",
        "baseName": "XXXXXXXXXX",
        "packageName": "xxxxxxxxxxxxxx",
        "packageFolder": "xxxxxxxxxxxxxx",
        "serverPort": "8080",
        "authenticationType": "oauth2",
        "cacheProvider": "ehcache",
        "enableHibernateCache": true,
        "websocket": false,
        "databaseType": "sql",
        "devDatabaseType": "h2Disk",
        "prodDatabaseType": "mysql",
        "searchEngine": false,
        "messageBroker": false,
        "serviceDiscoveryType": false,
        "buildTool": "maven",
        "enableSwaggerCodegen": false,
        "clientFramework": "angularX",
        "useSass": false,
        "clientPackageManager": "npm",
        "testFrameworks": [],
        "jhiPrefix": "jhi",
        "otherModules": [],
        "enableTranslation": false
    }
}

Answer 4

我创建了一个JSFiddle，作为不使用jQuery的示例。

以下面的HTML代码为例

<div id="origin-content">
  <div id="div1" _ngcontent-c1="">Content 1</div>
  <div id="div2" ng-reflect-klass="panel album">Content 2</div>
  <div id="div3" ng-reflect-ng-class="blue">Content 3</div>
</div>
<hr>
<div id="target-content">
</div>

我使用以下代码从origin-content中提取了所有子代，并将其复制到target-content中。

var result = document.getElementById('target-content');
var elems = document.querySelector('#origin-content').children;
var count = elems.length;

for (var i = 0; i < count; i++) {
  var val = elems[i];
  val.removeAttribute('_ngcontent-c1');
  val.removeAttribute('ng-reflect-klass');
  val.removeAttribute('ng-reflect-ng-class');
  result.innerHTML += val.outerHTML;
}

仍有很大的改进空间。

我希望这有助于解决OP问题。

Javascript-从“ .innerHTML”结果中剥离某些字符串

4 个答案: