Question

我有一个字符串，其中包含一些html标签中的内容，还有一些文本。

看起来像这样：

var str =  "<p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src="..." height="111" width="333"></iframe><p></p><p><sub>hello blabla</sub></p><p><br></p><iframe src="..." height="444" width="888"></iframe>"

我想在Javascript或AngularJS中以某种方式提取某些标记（包括内容和属性），然后将它们放入数组中。

例如，如果我只想要<iframe>标记，我应该这样：

var array = ["<iframe src='...' height='111' width='333'></iframe>", "<iframe src='...' height='444' width='888'></iframe>"];

如果我想要<p>标签，那么：

var array = ["", "<i>blabla</i>","<i><b>blaaaaaablaaaaa</b></i>","","<sub>hello blabla</sub>","<br>"];

有什么建议吗？谢谢！

注意：请不要使用Jquery 给出答案

Answer 1

您可以创建一个角度元素并从中获取文本。

示例：

$scope.array =[];
$scope.eles=
angular.element(str).find('iframe');
[].forEach.call($scope.eles, function (ctl) {
    $scope.name.push(angular.element(ctl).text())
});

这是一个演示：http://jsfiddle.net/Lvc0u55v/5122/

<小时/> 的修改要获取标签的所有html，您可以执行以下操作：

angular.element(str).find('iframe');
    [].forEach.call($scope.eles, function (ctl) {
        $scope.name.push(ctl.outerHTML)
    });

演示：http://jsfiddle.net/Lvc0u55v/5123/

Answer 2

试试这段代码：

var iFrameArr= str.match("<iframe>(.*)<iframe>");
var iFrameContent = iFrameArr[1];

Answer 3

您需要使用'(<iframe>).*(<\/iframe>)'等过滤器来查看使用正则表达式拆分字符串。这将找到它们之间的标记以及它们之间的所有内容，并在每次迭代时将其放入捕获组中。

Answer 4

将html内容设置为DOM并使用iframe tag

提取jquery

假设div

中有id='test' DOM

var str = "<div> .... </div> <iframe src=".....">..</iframe> 
  text blabla 
  <iframe src="....."> ....blabla2.... </iframe> 
  ....
  <p>.....</p> 
  ......";
$('#test').html(str);

var ar=[]
$('#test iframe').each(function() {
    var x = $(this).wrap('<p/>').parent().html();//wrap the iframe with element p and get the html of the parent
    ar.push(x)//add the html content to array
});

//now ar contains the expected output

     String DisplayName = "XYZ";
     String MobileNumber = "123456";
     String HomeNumber = "1111";
         String WorkNumber = "2222";
      String emailID = "email@nomail.com";
     String company = "bad";
   String jobTitle = "abcd";


ArrayList < ContentProviderOperation > ops = new ArrayList <     

ContentProviderOperation > ();

  ops.add(ContentProviderOperation.newInsert(
  ContactsContract.RawContacts.CONTENT_URI)
 .withValue(ContactsContract.RawContacts.ACCOUNT_TYPE, null)
 .withValue(ContactsContract.RawContacts.ACCOUNT_NAME, null)
 .build());

 //------------------------------------------------------ Names
  if (DisplayName != null) {
  ops.add(ContentProviderOperation.newInsert(
  ContactsContract.Data.CONTENT_URI)
     .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
     .withValue(ContactsContract.Data.MIMETYPE,
 ContactsContract.CommonDataKinds.StructuredName.CONTENT_ITEM_TYPE)
     .withValue(
 ContactsContract.CommonDataKinds.StructuredName.DISPLAY_NAME,
 DisplayName).build());
 }

 //------------------------------------------------------ Mobile Number                     
 if (MobileNumber != null) {
 ops.add(ContentProviderOperation.
 newInsert(ContactsContract.Data.CONTENT_URI)
     .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
     .withValue(ContactsContract.Data.MIMETYPE,
 ContactsContract.CommonDataKinds.Phone.CONTENT_ITEM_TYPE)
     .withValue(ContactsContract.CommonDataKinds.Phone.NUMBER, MobileNumber)
     .withValue(ContactsContract.CommonDataKinds.Phone.TYPE,
 ContactsContract.CommonDataKinds.Phone.TYPE_MOBILE)
     .build());
 }

//------------------------------------------------------ Home Numbers
if (HomeNumber != null) {    ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)
     .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
     .withValue(ContactsContract.Data.MIMETYPE,
 ContactsContract.CommonDataKinds.Phone.CONTENT_ITEM_TYPE)
     .withValue(ContactsContract.CommonDataKinds.Phone.NUMBER, HomeNumber)
     .withValue(ContactsContract.CommonDataKinds.Phone.TYPE,
 ContactsContract.CommonDataKinds.Phone.TYPE_HOME)
     .build());
}
 //------------------------------------------------------ Work Numbers
 if (WorkNumber != null) {     ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)
     .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
     .withValue(ContactsContract.Data.MIMETYPE,
 ContactsContract.CommonDataKinds.Phone.CONTENT_ITEM_TYPE)
     .withValue(ContactsContract.CommonDataKinds.Phone.NUMBER, WorkNumber)
     .withValue(ContactsContract.CommonDataKinds.Phone.TYPE,
 ContactsContract.CommonDataKinds.Phone.TYPE_WORK)
     .build());
  }

//------------------------------------------------------ Email
  if (emailID != null) {ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)
     .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
     .withValue(ContactsContract.Data.MIMETYPE,
 ContactsContract.CommonDataKinds.Email.CONTENT_ITEM_TYPE)
     .withValue(ContactsContract.CommonDataKinds.Email.DATA, emailID)
     .withValue(ContactsContract.CommonDataKinds.Email.TYPE,   
ContactsContract.CommonDataKinds.Email.TYPE_WORK)
     .build());
}//------------------------------------------------------ Organization
 if (!company.equals("") && !jobTitle.equals("")) { ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)
     .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
     .withValue(ContactsContract.Data.MIMETYPE,
 ContactsContract.CommonDataKinds.Organization.CONTENT_ITEM_TYPE)
     .withValue(ContactsContract.CommonDataKinds.Organization.COMPANY,    
 company) .withValue(ContactsContract.CommonDataKinds.Organization.TYPE,   
  ContactsContract.CommonDataKinds.Organization.TYPE_WORK)
     .withValue(ContactsContract.CommonDataKinds.Organization.TITLE,     
 jobTitle)
     .withValue(ContactsContract.CommonDataKinds.Organization.TYPE,  
  ContactsContract.CommonDataKinds.Organization.TYPE_WORK)
     .build());
 }

// Asking the Contact provider to create a new contact                 
  try {
 getContentResolver().applyBatch(ContactsContract.AUTHORITY, ops);
  } catch (Exception e) {
 e.printStackTrace();
 Toast.makeText(myContext, "Exception: " + e.getMessage(),    
 Toast.LENGTH_SHORT).show();
}

如何使用javascript或angularjs从字符串中提取html标签的内容？

4 个答案: