小程序ajax返回html,小程序怎么处理爬取得到的数据，包括html标签样式等

最新推荐文章于 2025-04-04 16:14:12 发布

假夜

最新推荐文章于 2025-04-04 16:14:12 发布

阅读量293

点赞数

文章标签：小程序ajax返回html

最近打算做小程序，可是发现小程序没有能力去处理html标签，之前做项目一直都是用vuejs，还可以使用v-text或者v-html去处理显示html标签，可是在小程序中不知道怎么做，比如爬取到的数据：

jQuery tagEditor Plugin

body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }

html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }

p, td { line-height: 1.5; }

ul { padding: 0 0 0 20px; }

th { background: #eee; white-space: nowrap; }

th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }

td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }

h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }

h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }

h2 { font-size: 2em; color: #636363; }

h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }

h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }

a { color: #4e99c7; text-decoration: none; }

a:hover { text-decoration: underline; }

p, pre { margin: 0 0 1.2em; }

::selection { color: #fff; background: #328efd; }

::-moz-selection { color: #fff; background: #328efd; }

@media (max-width:480px) {

h1 { font-size: 3em; }

h2 { font-size: 1.8em; }

h3 { font-size: 1.5em; }

td:first-child { white-space: normal; }

}

.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }

pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }

pre i { color: #aaa; } /* comments */

pre b { font-weight: normal; color: #cf4b25; } /* strings */

pre em { color: #0c59e9; } /* numeric */

/* Pure CSS */

.pure-button { margin: 5px 0; text-decoration: none !important; }

.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }

.button-sm { font-size: 85%; }

textarea {

width: 100%; height: 29px; padding: .3em .5em; border: 1px solid #ddd; font-size: .9em;

box-sizing: border-box; margin: 0 0 20px;

}

textarea[readonly] { color: #aaa; background: #f7f7f7; }

#response {

margin: 0 0 1.2em; padding: 10px; background: #f3f3f3; color: #777;

font-size: .9em; max-height: 150px; overflow: hidden; overflow-y: auto;

}

#response i { font-style: normal; color: #cf4b25; }

#response hr { margin: 2px 0; border: 0; border-top: 1px solid #eee; border-bottom: 1px solid #fdfdfd; }

/* overwrite default CSS for tiny, dark tags in demo5 */

#demo5+.tag-editor { background: #fafafa; font-size: 12px; }

#demo5+.tag-editor .tag-editor-tag { color: #fff; background: #555; border-radius: 2px; }

#demo5+.tag-editor .tag-editor-spacer { width: 7px; }

#demo5+.tag-editor .tag-editor-delete { display: none; }

/* color tags */

.tag-editor .red-tag .tag-editor-tag { color: #c65353; background: #ffd7d7; }

.tag-editor .red-tag .tag-editor-delete { background-color: #ffd7d7; }

.tag-editor .green-tag .tag-editor-tag { color: #45872c; background: #e1f3da; }

.tag-editor .green-tag .tag-editor-delete { background-color: #e1f3da; }

tagEditor

A powerful and lightweight tag editor plugin for jQuery.

Download

View on GitHub

example tags, sortable, autocomplete, edit in place, tab/cursor navigation, duplicate check, callbacks, copy-paste, placeholder, public methods, custom delimiter, graceful degradation

Overview and Features

Released under the MIT License.

Source on Github (changelog).

Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. IE7 technically works, but no care has gone into CSS/layout bugs.

tagEditor depends on accursoft's caret plugin (1.1 kB minified).

Lightweight: 8.5 kB of JavaScript - less than 3.2 kB gzipped
Edit in place tags
Intuitive navigation between tags with cursor keys, Tab, Shift+Tab, Enter, Pos1, End, Backspace, Del, and ESC
Optional jQuery UI sortable
Optional jQuery UI autocomplete
Copy-paste or delete multiple selected tags
Duplicate tags check
Custom delimiter/s
Placeholder
Custom style for faulty tags
Public methods for reading, adding and removing tags + destroy function
Callbacks
Allows tabindex for form navigation
Graceful degradation if JavaScript is disabled

This plugin was developed by and for Pixabay.com - an international repository for free Public Domain images.

We have implemented this piece of software in production and we share it - in the spirit of Pixabay - freely with others.

Usage

Include the stylesheet jquery.tag-editor.css in the <head> section of your HTML document - and the JavaScript file jquery.tag-editor.min.js after loading jQuery and optional jQuery UI sortable/autocomplete.

Make sure to also load accursoft's caret plugin (1.1 kB minified).

tagEditor accepts settings from an object of key/value pairs, and can be assigned to any text input field or textarea.

$(selector).tagEditor({key1: value1, key2: value2});

// examples

// assign tag editor to textarea - existing text will be used as initial tags

$('textarea').tagEditor();

// assign tag editor to text input with initial tags

$('input[type="text"]').tagEditor({ initialTags: ['tag1', 'tag2', 'tag3'] });

// use jQuery UI autocomplete

$('#my_textarea').tagEditor({ autocomplete: { 'source': '/url/', minLength: 3 } });

Settings

Property	Default	Description
initialTags	[]	Initial tags as an array of strings.
maxTags	null	Maximum number of allowed tags.
maxLength	50	maxlength attribute of the tag input field.
delimiter	',;'	Required string of delimiters - characters for separating tags. The first character is used as default delimiter in the (hidden) original field.
placeholder	''	Placeholder text for empty tag editor.
forceLowercase	true	Lowercase all tags.
removeDuplicates	true	Automatically remove duplicate tags.
clickDelete	false	Delete tags on right click and on Ctrl+click.
animateDelete	175	Animate duration for deletion of tags in milliseconds. Set to 0 for non-animated removal.
sortable	true	If jQuery UI sortable is available and this option is set to true, tags are sortable by drag and drop.
autocomplete	null	jQuery UI autocomplete options as key/value pairs object. If provided, jQuery UI autocomplete must be loaded additionally.

Callbacks
onChange(field, editor, tags)	Callback that fires after tags are changed. field is the (hidden) original field, editor is the editor's DOM element (an <ul> list of tag elements), and tags contains the list of current tags.
beforeTagSave(field, editor, tags, tag, val)	Callback that fires before a tag is saved. field is the (hidden) original field, editor is the editor's DOM element. tags contains the list of current tags, tag is the value that is about to get overwritten (empty string, unless an existing tag gets changed), and val is the new value to be saved. beforeTagSave() may return a string for overwriting the saved tag. Return false for reverting to the tag's previous value (or to skip this tag value in the case of copy-paste insertion).
beforeTagDelete(field, editor, tags, val)	Callback that fires before a tag is deleted. field is the (hidden) original field, editor is the editor's DOM element. tags contains the list of current tags, val is the tag that is about to get deleted. Return false to prevent this action.

Public Methods
getTags	Returns a list of objects in the following format: [{ field: selected input/textarea, editor: editor instance for field, tags: current tags }]
addTag(val, blur)	Adds val as a new tag. Set blur to true if focus should not be set automatically into an empty, new tag after this action.
removeTag(val, blur)	Removes val as tag. Set blur to true if focus should not be set automatically into an empty, new tag after this action.
destroy	Removes the tag editor instance an restores visibility of the original text field or textarea.

Demos

Basic settings

$('#demo1').tagEditor({

initialTags: ['Hello', 'World', 'Example', 'Tags'],

delimiter: ', ', /* space and comma */

placeholder: 'Enter tags ...'

});

The original field - textarea or text input - is normally hidden automatically. We show it here to make value changes visible:

The placeholder is visible when all tags are deleted and the editor looses focus.

jQuery UI is already loaded on this page - and by default, tags are then sortable via drag and drop.

Autocomplete

For enabling tag autocompletion, make sure to have jQuery UI autocomplete readily loaded.

You can then pass any options that work with UI autocomplete to your tagEditor settings.

$('#demo2').tagEditor({

autocomplete: {

delay: 0, // show suggestions immediately

position: { collision: 'flip' }, // automatic menu position up/down

source: ['ActionScript', 'AppleScript', 'Asp', ... 'Python', 'Ruby']

forceLowercase: false,

placeholder: 'Programming languages ...'

});

Public methods

$('#demo3').tagEditor({

initialTags: ['Hello', 'World'],

placeholder: 'Enter tags ...'

});

getTags

addTag 'example'

removeTag 'example'

Remove all tags

destroy

Init editor

// actions on button clicks

// getTags

alert( $('#demo3').tagEditor('getTags')[0].tags );

// addTag

$('#demo3').tagEditor('addTag', 'example');

// removeTag

$('#demo3').tagEditor('removeTag', 'example');

// Remove all tags

function() {

var tags = $('#demo3').tagEditor('getTags')[0].tags;

for (i = 0; i < tags.length; i++) { $('#demo3').tagEditor('removeTag', tags[i]); }

}

// working shortcut for removing all tags

// $('#demo3').next('.tag-editor').find('.tag-editor-delete').click();

// destroy

$('#demo3').tagEditor('destroy');

// re-init editor

$('#demo3').tagEditor({ placeholder: 'Enter tags ...' });

Callbacks

$('#demo4').tagEditor({

initialTags: ['Hello', 'World'],

placeholder: 'Enter tags ...',

onChange: function(field, editor, tags) {

$('#response').prepend(

'Tags changed to: ' + (tags.length ? tags.join(', ') : '----') + '<hr>'

);

beforeTagSave: function(field, editor, tags, tag, val) {

$('#response').prepend('Tag ' + val + ' saved' + (tag ? ' over ' + tag : '') + '.');

beforeTagDelete: function(field, editor, tags, val) {

var q = confirm('Remove tag "' + val + '"?');

if (q) $('#response').prepend('Tag ' + val + ' deleted.');

else $('#response').prepend('Removal of ' + val + ' discarded.');

return q;

}

});

Callback response:

Starting tags: hello, world

Custom style and clickDelete

Use right mouse click or Ctrl+left click to delete tags.

$('#demo5').tagEditor({

clickDelete: true,

initialTags: [ ... ],

placeholder: 'Enter tags ...'

});

/* overwrite default CSS for tiny, dark tags */

#demo5+.tag-editor { background: #fafafa; font-size: 12px; }

#demo5+.tag-editor .tag-editor-tag {

color: #fff; background: #555;

border-radius: 2px;

}

#demo5+.tag-editor .tag-editor-spacer { width: 7px; }

#demo5+.tag-editor .tag-editor-delete { display: none; }

This jQuery plugin was designed with custom styling in mind. In this example we've enabled the clickDelete feature while hiding all delete icons. Both options may be used at the same time, as well.

By fiddling around with the default stylesheet, you can achieve almost any desired look for your tag Editor.

Comments inside the CSS file will help you understand what rule controls which object inside the editor.

Custom CSS classes for tags

Using the onChange callback for adding custom CSS classes to specific tags.

$('#demo6').tagEditor({

initialTags: ['custom', 'class', 'red', 'green', 'demo'],

onChange: tag_classes

});

function tag_classes(field, editor, tags) {

$('li', editor).each(function(){

var li = $(this);

if (li.find('.tag-editor-tag').html() == 'red') li.addClass('red-tag');

else if (li.find('.tag-editor-tag').html() == 'green') li.addClass('green-tag')

else li.removeClass('red-tag green-tag');

});

}

// first assign tag classes after initializing tagEditor; onChange is not called on init

tag_classes(null, $('#demo6').tagEditor('getTags')[0].editor);

In the onChange callback we iterate over all tags and assign custom CSS classes where appropriate.

The DOM structure of the editor looks like this:

<ul>

<li>

<div class="tag-editor-tag">Tag content</div>

</li>

[...]

</ul>

In the example, we simply add CSS classes to the <li> elements.

This is just an exampe of what the onChange callback may be used for. Inside of it, addTag and removeTag may be called to dynamically change the current list of tags.

Please report any bugs and issues at the GitHub repositiory.

This software is released as Open Source under the MIT License by Simon Steinberger / Pixabay.com.

About Us

Blog

More Goodies

// jQuery UI autocomplete extension - suggest labels may contain HTML tags

// github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js

(function($){var proto=$.ui.autocomplete.prototype,initSource=proto._initSource;function filter(array,term){var matcher=new RegExp($.ui.autocomplete.escapeRegex(term),"i");return $.grep(array,function(value){return matcher.test($("

").html(value.label||value.value||value).text());});}$.extend(proto,{_initSource:function(){if(this.options.html&&$.isArray(this.options.source)){this.source=function(request,response){response(filter(this.options.source,request.term));};}else{initSource.call(this);}},_renderItem:function(ul,item){return $("").data("item.autocomplete",item).append($(" ")[this.options.html?"html":"text"](item.label)).appendTo(ul);}});})(jQuery);

var cache = {};

function googleSuggest(request, response) {

var term = request.term;

if (term in cache) { response(cache[term]); return; }

$.ajax({

url: 'https://query.yahooapis.com/v1/public/yql',

dataType: 'JSONP',

data: { format: 'json', q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q='+term+'"' },

success: function(data) {

var suggestions = [];

try { var results = data.query.results.toplevel.CompleteSuggestion; } catch(e) { var results = []; }

$.each(results, function() {

try {

var s = this.suggestion.data.toLowerCase();

suggestions.push({label: s.replace(term, ''+term+''), value: s});

} catch(e){}

});

cache[term] = suggestions;

response(suggestions);

}

});

}

$(function() {

$('#hero-demo').tagEditor({

placeholder: 'Enter tags ...',

autocomplete: { source: googleSuggest, minLength: 3, delay: 250, html: true, position: { collision: 'flip' } }

});

$('#demo1').tagEditor({ initialTags: ['Hello', 'World', 'Example', 'Tags'], delimiter: ', ', placeholder: 'Enter tags ...' }).css('display', 'block').attr('readonly', true);

$('#demo2').tagEditor({

autocomplete: { delay: 0, position: { collision: 'flip' }, source: ['ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme'] },

forceLowercase: false,

placeholder: 'Programming languages ...'

});

$('#demo3').tagEditor({ initialTags: ['Hello', 'World'], placeholder: 'Enter tags ...' });

$('#remove_all_tags').click(function() {

var tags = $('#demo3').tagEditor('getTags')[0].tags;

for (i=0;i

});

$('#demo4').tagEditor({

initialTags: ['Hello', 'World'],

placeholder: 'Enter tags ...',

onChange: function(field, editor, tags) { $('#response').prepend('Tags changed to: '+(tags.length ? tags.join(', ') : '----')+'

'); },

beforeTagSave: function(field, editor, tags, tag, val) { $('#response').prepend('Tag '+val+' saved'+(tag ? ' over '+tag+'' : '')+'.

'); },

beforeTagDelete: function(field, editor, tags, val) {

var q = confirm('Remove tag "'+val+'"?');

if (q) $('#response').prepend('Tag '+val+' deleted.

');

else $('#response').prepend('Removal of '+val+' discarded.

');

return q;

}

});

$('#demo5').tagEditor({ clickDelete: true, initialTags: ['custom style', 'dark tags', 'delete on click', 'no delete icon', 'hello', 'world'], placeholder: 'Enter tags ...' });

function tag_classes(field, editor, tags) {

$('li', editor).each(function(){

var li = $(this);

if (li.find('.tag-editor-tag').html() == 'red') li.addClass('red-tag');

else if (li.find('.tag-editor-tag').html() == 'green') li.addClass('green-tag')

else li.removeClass('red-tag green-tag');

});

}

$('#demo6').tagEditor({ initialTags: ['custom', 'class', 'red', 'green', 'demo'], onChange: tag_classes });

tag_classes(null, $('#demo6').tagEditor('getTags')[0].editor); // or editor == $('#demo6').next()

});

if (~window.location.href.indexOf('http')) {

(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();

(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=114593902037957";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

$('#github_social').html('\

');

}

小程序有什么办法能够对这样的数据进行处理